<template>
    <div class="header"  style="">
        <div class="backLogo">
            <van-icon name="arrow-left" color="white" size="22px" @click="goBack" v-if="isBack"/>
        </div>
        <div class="title">
            <span>{{titleName}}</span>
        </div>
        <div class="rightOperator" v-if="rightOperator">
            <span>{{rightOperator}}</span>
        </div>
    </div>

</template>

<script>
    export default {
        name: "titleIndex",
        props: {
            // 标题名称
            titleName: {
                type: String,
                require: false,
                default: "报名系统"
            },
            // 是否带返回操作
            isBack: {
                type: Boolean,
                require: false,
                default: true
            },
            // 是否带右侧操作
            rightOperator: {
                type: String,
                require: false,
                default: '订单'
            },
        },
        methods:{
            goBack(){
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>

    .header{
        width: 100%;
        height: 6.2vh;
        background: #FE5722;
        color: white;
        font-size: 0.5rem;
        top: 0;
        z-index: 999;
        position: fixed;
    }
    .title {
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.15rem;
        font-size: 20px;
    }

    .backLogo {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding-left: 10px;
        z-index: 9999;
    }

    .rightOperator{
        position: absolute;
        top: 18px;
        right: 20px;
        font-size: 16px;
        color: white;
    }
</style>
